import React, { useEffect, useRef } from 'react';
import './style.less';

type IProps = {
  content: any;
  speed?: number;
};
const UnlimitedMarquee: React.FC<IProps> = ({ content, speed = 100 }) => {
  let MyMar: any = null;
  const wrap = useRef(null);
  const content1 = useRef(null);
  const content2 = useRef(null);
  useEffect(() => {
    wrap.current.style.height = content1?.current.offsetHeight + 'px';

    function Marquee() {
      if (wrap.current) {
        if (content2?.current?.offsetHeight === wrap?.current?.scrollTop) {
          wrap.current.scrollTop -= content1?.current?.offsetHeight;
        }

        wrap.current.scrollTop++;
      }
    }

    MyMar = setInterval(Marquee, speed);
    wrap.current.onmouseover = function StartScroll() {
      clearInterval(MyMar);
    };

    wrap.current.onmouseout = function StopScroll() {
      MyMar = setInterval(Marquee, speed);
    };
    return () => {
      clearInterval(MyMar);
    };
  }, []);

  return (
    <div style={{ height: '100%' }}>
      <div ref={wrap} className="wrap">
        <div ref={content1} className="content" style={{ overflow: 'hidden' }}>
          {content}
        </div>
        <div ref={content2} className="content" style={{ overflow: 'hidden' }}>
          {content}
        </div>
      </div>
    </div>
  );
};
export default UnlimitedMarquee;
